<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>御码数据可视化</title>
  <link rel="stylesheet" href="./fonts/icomoon.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/echarts.min.js"></script>
  <script src="./js/china.js"></script>
  <script src="./js/flexb.js"></script>
  <script src="./js/index.js"></script>
</head>

<body>
  <div class="view">
    <!-- 左侧容器 -->
    <div class="left_continer">
      <!-- 上 -->
      <div class="left_top_continer">
        <div class="item">
          <h4>2,1900</h4>
          <p>
            <span class="icon-dot"></span>
            设备总数
          </p>
        </div>

        <div class="item">
          <h4>2,1900</h4>
          <p>
            <span class="icon-dot"></span>
            设备总数
          </p>
        </div>

        <div class="item">
          <h4>2,1900</h4>
          <p>
            <span class="icon-dot"></span>
            设备总数
          </p>
        </div>

        <div class="item">
          <h4>2,1900</h4>
          <p>
            <span class="icon-dot"></span>
            设备总数
          </p>
        </div>
      </div>
      <!-- 中 -->
      <div class="left_middle_continer">
        <div class="title">
          <a href="javascript:;" data-myid="list1">故障设备监控</a>
          <div class="line"></div>
          <a href="javascript:;" class="active" data-myid="list2">异常设备监控</a>
        </div>
        <!-- 副标题 -->
        <div class="subtitle">
          <span>故障时间</span>
          <span>设备地址</span>
          <span>异常代码</span>
        </div>
        <!-- 动画列表 -->
        <div class="listBox">
          <div class="content list1" style="display: none;">
            <ul>
              <li>
                <span>2025年</span>
                <span>大连御码甘井子沙河口嘉创大厦</span>
                <span>10010</span>
              </li>
              <li>
                <span>2025年</span>
                <span>大连御码甘井子沙河口嘉创大厦</span>
                <span>10010</span>
              </li>
              <li>
                <span>2025年</span>
                <span>大连御码甘井子沙河口嘉创大厦</span>
                <span>10010</span>
              </li>
              <li>
                <span>2025年</span>
                <span>大连御码甘井子沙河口嘉创大厦</span>
                <span>10010</span>
              </li>
              <li>
                <span>2025年</span>
                <span>大连御码甘井子沙河口嘉创大厦</span>
                <span>10010</span>
              </li>
              <li>
                <span>2025年</span>
                <span>大连御码甘井子沙河口嘉创大厦</span>
                <span>10010</span>
              </li>
              <li>
                <span>2025年</span>
                <span>大连御码甘井子沙河口嘉创大厦</span>
                <span>10010</span>
              </li>
              <li>
                <span>2025年</span>
                <span>大连御码甘井子沙河口嘉创大厦</span>
                <span>10010</span>
              </li>
              <li>
                <span>2025年</span>
                <span>大连御码甘井子沙河口嘉创大厦</span>
                <span>10010</span>
              </li>
              <li>
                <span>2025年</span>
                <span>大连御码甘井子沙河口嘉创大厦</span>
                <span>10010</span>
              </li>
            </ul>
          </div>
          <div class="content list2" style="display: block;">
            <ul>
              <li>
                <span>2026年</span>
                <span>大连嘉创大厦1602</span>
                <span>1602</span>
              </li>
              <li>
                <span>2026年</span>
                <span>大连嘉创大厦1602</span>
                <span>1602</span>
              </li>
              <li>
                <span>2026年</span>
                <span>大连嘉创大厦1602</span>
                <span>1602</span>
              </li>
              <li>
                <span>2026年</span>
                <span>大连嘉创大厦1602</span>
                <span>1602</span>
              </li>
              <li>
                <span>2026年</span>
                <span>大连嘉创大厦1602</span>
                <span>1602</span>
              </li>
              <li>
                <span>2026年</span>
                <span>大连嘉创大厦1602</span>
                <span>1602</span>
              </li>
              <li>
                <span>2026年</span>
                <span>大连嘉创大厦1602</span>
                <span>1602</span>
              </li>
              <li>
                <span>2026年</span>
                <span>大连嘉创大厦1602</span>
                <span>1602</span>
              </li>
              <li>
                <span>2026年</span>
                <span>大连嘉创大厦1602</span>
                <span>1602</span>
              </li>
              <li>
                <span>2026年</span>
                <span>大连嘉创大厦1602</span>
                <span>1602</span>
              </li>

            </ul>
          </div>
        </div>
      </div>
      <!-- 下 -->
      <div class="left_bottom_continer">
        <div class="title">定位分布统计</div>
        <div class="content">
          <!-- 饼状图 -->
          <div class="pieBox"></div>
          <!-- 信息显示 -->
          <div class="msg">
            <div class="item">
              <h4>320,11</h4>
              <span class="icon-dot">点位总数</span>
            </div>

            <div class="item">
              <h4>320,11</h4>
              <span class="icon-dot">本月新增</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间容器 -->
    <div class="middle_continer">
      <div class="title">
        <span class="icon-cube"></span>
        设备数量统计
      </div>
      <!-- 地图 -->
      <div class="map"></div>
      <!-- 柱状图 -->
      <div class="barBox">
        <div class="title">全国用总量统计</div>
        <div class="content">
          <!-- 柱状图 -->
          <div class="bar"></div>
          <div class="meg">
            <div class="item">
              <h4>320,11</h4>
              <p>
                <span class="icon-dot"></span>
                点位总数
              </p>
            </div>
            <div class="item">
              <h4>320,11</h4>
              <p>
                <span class="icon-dot"></span>
                点位总数
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧容器 -->
    <div class="right_continer">
      <!-- 顶部第一个 -->
      <div class="right_top_continer">
        <!-- 顶部标题 -->
        <div class="title">
          <a href="javascript:;" class="active">365天</a>
          <div class="line"></div>
          <a href="javascript:;">90天</a>
          <div class="line"></div>
          <a href="javascript:;">30天</a>
          <div class="line"></div>
          <a href="javascript:;">24小时</a>
        </div>
        <!-- 内容区域 -->
        <div class="content">
          <div class="item" style="display: block;">
            <div class="msg">
              <h4>365</h4>
              <p>
                <span class="icon-dot" style="color: red;"></span>
                订单量
              </p>
            </div>
            <div class="msg">
              <h4>3650</h4>
              <p>
                <span class="icon-dot" style="color: #fefd00"></span>
                销售额(万元)
              </p>
            </div>
          </div>

          <div class="item" style="display: none;">
            <div class="msg">
              <h4>90</h4>
              <p>
                <span class="icon-dot" style="color: red;"></span>
                订单量
              </p>
            </div>
            <div class="msg">
              <h4>900</h4>
              <p>
                <span class="icon-dot" style="color: #fefd00"></span>
                销售额(万元)
              </p>
            </div>
          </div>

          <div class="item" style="display: none;">
            <div class="msg">
              <h4>30</h4>
              <p>
                <span class="icon-dot" style="color: red;"></span>
                订单量
              </p>
            </div>
            <div class="msg">
              <h4>300</h4>
              <p>
                <span class="icon-dot" style="color: #fefd00"></span>
                销售额(万元)
              </p>
            </div>
          </div>

          <div class="item" style="display: none;">
            <div class="msg">
              <h4>24</h4>
              <p>
                <span class="icon-dot" style="color: red;"></span>
                订单量
              </p>
            </div>
            <div class="msg">
              <h4>240</h4>
              <p>
                <span class="icon-dot" style="color: #fefd00"></span>
                销售额(万元)
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 顶部第二个 -->
      <div class="right_two_continer">
        <div class="title">
          <h3>销售额统计</h3>
          <div class="line"></div>
          <a href="javascript:;" data-btnname="year" class="active">年</a>
          <a href="javascript:;" data-btnname="quarter">季</a>
          <a href="javascript:;" data-btnname="month">月</a>
          <a href="javascript:;" data-btnname="week">周</a>
        </div>
        <!-- 内容区域 -->
        <div class="content">
          <div class="linebar"></div>
        </div>

      </div>

      <!-- 顶部第三个 -->
      <div class="right_three_continer">
        <div class="item">
          <div class="title">渠道分布</div>
          <div class="content">
            <div class="box">
              <h3>90%</h3>
              <p>
                <span class="icon-plane"></span>
                机场
              </p>
            </div>
            <div class="box">
              <h3>90%</h3>
              <p>
                <span class="icon-plane"></span>
                机场
              </p>
            </div>
            <div class="box">
              <h3>90%</h3>
              <p>
                <span class="icon-plane"></span>
                机场
              </p>
            </div>
            <div class="box">
              <h3>90%</h3>
              <p>
                <span class="icon-plane"></span>
                机场
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">一季度销售进度</div>

          <!-- 销售进度 -->
          <div class="progress_box">
              <h1>50%</h1>
              <div class="progress"></div>
          </div>
          

          <div class="content">
               <div class="box">
              <h3>90%</h3>
              <p>
                <span class="icon-plane"></span>
                机场
              </p>
            </div>
            <div class="box">
              <h3>90%</h3>
              <p>
                <span class="icon-plane"></span>
                机场
              </p>
            </div>
          </div>
        </div>
      </div>

       <!-- 最后一个盒子 -->
      <div class="right_bottom_continer">
          <div class="title">
              <a href="javascript:;">全国热榜</a>
              <a href="javascript:;">各省热销</a>
              <a href="javascript:;">//进30日//</a>
          </div>
          <div class="content_bttom">
              <div class="left_list">
                  <ul>
                     <li>
                       <span class="icon-cup1" style="color: red;"></span>
                       可爱多
                     </li>
                     <li>
                       <span  class="icon-cup2"></span>
                       可爱多
                     </li>
                     <li>
                       <span  class="icon-cup3"></span>
                       可爱多
                     </li>
                  </ul>
              </div>
              <div class="left_content">
                  <div class="list_title">
                      <div class="item active"><span>北京</span><span>25,179</span> <span class="icon-up"></span> </div>
                      <div class="item"><span>上海</span><span>25,179</span> <span class="icon-down"></span> </div>
                      <div class="item"><span>杭州</span><span>25,179</span> <span class="icon-up"></span> </div>
                      <div class="item"><span>辽宁</span><span>25,179</span> <span class="icon-down"></span> </div>
                      <div class="item"><span>大连</span><span>25,179</span> <span class="icon-up"></span> </div>
                  </div>
                  <div class="list_content">
                      <div class="content" style="display: block;">
                          <div class="item"><span>八喜</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>八喜</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>八喜</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>八喜</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>八喜</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>八喜</span> <span>6,800</span> <span class="icon-up"></span> </div>
                      </div>
                      <div class="content" style="display: none;">
                          <div class="item"><span>可乐</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>可乐</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>可乐</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>可乐</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>可乐</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>可乐</span> <span>6,800</span> <span class="icon-up"></span> </div>
                      </div>
                      <div class="content" style="display: none;">
                          <div class="item"><span>雪碧</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>雪碧</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>雪碧</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>雪碧</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>雪碧</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>雪碧</span> <span>6,800</span> <span class="icon-up"></span> </div>
                      </div>
                      <div class="content" style="display: none;">
                          <div class="item"><span>蜜雪冰城</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>蜜雪冰城</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>蜜雪冰城</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>蜜雪冰城</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>蜜雪冰城</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>蜜雪冰城</span> <span>6,800</span> <span class="icon-up"></span> </div>
                      </div>
                      <div class="content" style="display: none;">
                          <div class="item"><span>瑞幸</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>瑞幸</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>瑞幸</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>瑞幸</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>瑞幸</span> <span>6,800</span> <span class="icon-up"></span> </div>
                          <div class="item"><span>瑞幸</span> <span>6,800</span> <span class="icon-up"></span> </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

    </div>
  </div>
</body>

</html>